<template>
	<view>
		
		<view class="head_bg"><u-image mode="aspectFill" width="750" height="626"
				:src="zpImgUrl+'member-head.jpg'"></u-image></view>
		<view class="head-plate">
			<view class="nav-title">我的</view>
			<!-- <u-navbar :is-back="false" :border-bottom="false" title=" ">
				<view class="slot-wrap">
					<view class="head_title">我的</view>
					
					<u-icon @click="scan" :name="appletImgUrl+'my-sys-icon.png'" width="44" height="44"></u-icon>
				</view>
			</u-navbar> -->
			
			
			<view class="user" @click="loginState">
				<block v-if="hasLogin">
					<view @click.stop="previewUserHead">
						<u-image borStyle="4rpx solid #F39A16" mode="aspectFill" shape="circle" width="108" height="108"
							:src="userInfo.headPhoto"></u-image>
					</view>
					<view class="info login">
						<view class="">{{ userInfo.nickName }}</view>
						<view class="" style="background-color: #FDE5C8;" v-if="userInfo.level > 1">
							<view class="" @click.stop="$u.route('/pages/user/vip/vip')">
								<u-image width="35" mode="widthFix" :src="appletImgUrl+'team-vip-icon.png'"></u-image>
								<view class="">{{ userInfo.levelName }}</view>
							</view>
						</view>
						<view class="" style="background-color: rgba(225, 224, 224, .6);" v-else>
							<view class="" @click.stop="$u.route('/pages/user/vip/vip')">
								<u-image width="35" mode="widthFix" :src="appletImgUrl+'team-vip-icon2.png'"></u-image>
								<view class="">{{ userInfo.levelName }}</view>
							</view>
						</view>
					</view>
				</block>
				<block v-else>
					<u-image mode="aspectFill" shape="circle" width="108" height="108"
						:src="zpImgUrl+'logo.png'"></u-image>
					<view class="info">
						<view class="">登录/注册</view>
					</view>
				</block>
				<u-icon name="arrow-right" size="30"></u-icon>
			</view>
			<view class="account">
				<view class="account-item">
					<view class="account-top">消费券</view>
					<view class="account-bottom">{{couponTotal}}</view>
				</view>
				<view class="account-item">
					<view class="account-top">分红积分</view>
					<view class="account-bottom">{{redintegralTotal}}</view>
				</view>
				<view class="account-right" @click="jumpAccount">
					进入账户
				</view>
			</view>
			<view class="order">
				<view class="item" @click="toOrder(item)" v-for="(item, index) in orderItem" :key="index">
					<view class="u-image"><u-image :src="appletImgUrl+item.icon" width="56" height="56"
							mode="aspectFit"></u-image></view>
					<view class="">{{ item.name }}</view>
				</view>
			</view>
			<u-gap></u-gap>
			<view class="fun">
			
				<navigator class="item" hover-class="none" :url="hasLogin ? '/pages/user/myAccount/myAccount' : '/pages/user/login/login'">
					<view class="left">
						<u-image :src="appletImgUrl+'my-money.png'" width="38" mode="widthFix"></u-image>
						<view class="name">我的账户</view>
					</view>
					<view class="right"><u-icon name="arrow-right" color="#AAAAAA"></u-icon></view>
				</navigator>
				<navigator hover-class="none" :url="hasLogin ? '/pages/user/myTeam/myTeam' : '/pages/user/login/login'"
					class="item">
					<view class="left">
						<u-image :src="appletImgUrl+'my-fun-icon4.png'" width="38" mode="widthFix"></u-image>
						<view class="name">我的团队</view>
					</view>
					<view class="right"><u-icon name="arrow-right" color="#AAAAAA"></u-icon></view>
				</navigator>
				<navigator class="item" hover-class="none"
					:url="hasLogin ? '/pages/user/myInvitationCode/myInvitationCode' : '/pages/user/login/login'">
					<view class="left">
						<u-image :src="appletImgUrl+'my-fun-icon10.png'" width="38" mode="widthFix"></u-image>
						<view class="name">分享推广</view>
					</view>
					<view class="right"><u-icon name="arrow-right" color="#AAAAAA"></u-icon></view>
				</navigator>
				<navigator hover-class="none"
					:url="hasLogin ? '/pages/user/myCollection/myCollection' : '/pages/user/login/login'" class="item">
					<view class="left">
						<u-image :src="appletImgUrl+'my-fun-icon6.png'" width="38" mode="widthFix"></u-image>
						<view class="name">我的收藏</view>
					</view>
					<view class="right"><u-icon name="arrow-right" color="#AAAAAA"></u-icon></view>
				</navigator>
				<navigator hover-class="none"
					:url="hasLogin ? '/pages/user/myFootprint/myFootprint' : '/pages/user/login/login'" class="item">
					<view class="left">
						<u-image :src="appletImgUrl+'my-fun-icon2.png'" width="38" mode="widthFix"></u-image>
						<view class="name">我的足迹</view>
					</view>
					<view class="right"><u-icon name="arrow-right" color="#AAAAAA"></u-icon></view>
				</navigator>
				<navigator class="item" hover-class="none"
					:url="hasLogin ? '/pages/user/userInfo/userInfo' : '/pages/user/login/login'">
					<view class="left">
						<u-image :src="appletImgUrl+'my-fun-icon7.png'" width="38" mode="widthFix"></u-image>
						<view class="name">设置</view>
					</view>
					<view class="right"><u-icon name="arrow-right" color="#AAAAAA"></u-icon></view>
				</navigator>
			</view>
		</view>



		
		


	</view>
</template>

<script>
	import {
		imgUrl,
		appletImgUrl,
		zpImgUrl
	} from "@/common/config.js"
	export default {
		onReady() {

		},
		data() {
			return {
				imgUrl: imgUrl,
				zpImgUrl: zpImgUrl,
				navBarStyle: {
					background: '#F7F7F7'
				},
				tabBarState: false,
				orderItem: [{
						name: '待付款',
						icon: 'my-order-1.png',
						current: 1
					},
					{
						name: '待发货',
						icon: 'my-order-2.png',
						current: 2
					},
					{
						name: '待收货',
						icon: 'my-order-3.png',
						current: 3
					},
					{
						name: '已完成',
						icon: 'my-order-4.png',
						current: 4
					},
					{
						name: '全部订单',
						icon: 'my-order-5.png',
						current: 0
					}
				],

				hasLogin: false,
				userInfo: '',
				waitProceedMallFee: 0,
				currentMallFee: 0,
				appletImgUrl: appletImgUrl,
				isAgent: 2, //1代理商，2非代理商
				newuserInfo: {
					isCityPartner: null,
					isPartner: null
				},
				isCityPartner: 0, //0否，1是
				isPartner: 0 ,//0否，1是
				couponTotal:0,
				redintegralTotal:0,
				freezeAmount:0,
			};
		},
		onLoad() {

		},
		onShow() {
			//判断是否为代理商
			this.judgeAgent();
			this.getUserinfo();
			this.hasLogin = getApp().globalData.bindState;

			if (this.hasLogin) {
				let userInfo = uni.getStorageSync('userInfo');
				this.userInfo = userInfo;
				console.log(111, this.userInfo)
				this.$u.get('userwallet/info').then(res => {
					if (res && res.waitProceedMallFee) {
						this.waitProceedMallFee = res.waitProceedMallFee || 0;
						this.currentMallFee = res.currentMallFee;
					}

				});
				this.getWalletCoupons();
			}
		},

		methods: {
			judgeAgent() {
				let that = this;
				this.$u.get('agentinfo/isAgent').then(res => {
					console.log(res);
					that.isAgent = res.isAgent;
				});
			},
			getUserinfo() {
				let that = this;
				this.$u.get('user/info').then(res => {
					console.log(999, res);

					if (res.isCityPartner) {
						that.isCityPartner = res.isCityPartner;
					} else {
						that.isCityPartner = 0;
					}
					if (res.isPartner) {
						that.isPartner = res.isPartner;
					} else {
						that.isPartner = 0;
					}
				});
			},
			scan() {
				const self = this;
				uni.scanCode({
					success(res) {
						uni.setStorageSync('integralInfo', JSON.parse(res.result));
						self.$u.route('/pages/user/integralPayment/integralPayment');
					}
				});
			},
			toPartner() {
				if (this.hasLogin) {
					if (this.isPartner != 0) {
						this.$u.route('/pages/user/partner/partner');
					} else {
						uni.showToast({
							title: '您还不是合伙人',
							icon: 'none'
						});
					}
				} else {
					this.$u.route('/pages/login/login');
				}
			},
			toCityPartner() {
				if (this.hasLogin) {
					if (this.isCityPartner != 0) {
						this.$u.route('/pages/user/partner/cityPartner');
					} else {
						uni.showToast({
							title: '您还不是城市合伙人',
							icon: 'none'
						});
					}
				} else {
					this.$u.route('/pages/login/login');
				}
			},
			toOrder(item) {
				this.$u.route({
					url: this.hasLogin ? '/pages/user/order/order' : '/pages/user/login/login',
					params: {
						current: item.current
					}
				});
			},
			previewUserHead() {
				uni.previewImage({
					urls: [this.userInfo.headPhoto]
				});
			},
			toast() {
				uni.showToast({
					title: '暂未开放！',
					icon: 'none'
				});
			},
			loginState() {
				if (this.hasLogin) {
					this.jumpUserInfo();
				} else {
					this.login();
				}
			},
			jumpUserInfo() {
				this.$u.route('/pages/user/userInfo/userInfo');
			},
			login() {
				this.$u.route('/pages/user/login/login');
			},
			getWalletCoupons(){
				let that=this;
				this.$u.post('zpuserwallet/wallets',{walletType:""}).then(res => {
					console.log(res)
					if(res.length>0){
						res.map((item)=>{
							if(item.walletType=="MONEY"){
								that.couponTotal=item.currentAmount;
							}
							if(item.walletType=="RED_INTEGRAL"){
								that.redintegralTotal=item.currentAmount;
								that.freezeAmount=item.freezeAmount;
							}
						})
					}
					
					
				});
			},
			jumpAccount(){
				this.$u.route('/pages/user/myAccount/myAccount');
			}
		}
		
	};
</script>

<style lang="scss">
	.slot-wrap {
		display: flex;
		align-items: center;
		flex: 1;
		padding: 0 30rpx;
		/* 如果您想让slot内容占满整个导航栏的宽度 */
		/* flex: 1; */
		/* 如果您想让slot内容与导航栏左右有空隙 */
		/* padding: 0 30rpx; */
		justify-content: space-between;

		.title {
			font-size: 32rpx;
			font-weight: bold;
		}
	}

	.red-envelopes {
		position: relative;

		.box {
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 40rpx;

			>view {
				flex: 1;
				text-align: center;
				color: #ffffff;

				&:last-child {
					border-left: 1rpx solid rgba($color: #ffffff, $alpha: 0.5);
				}

				>view {
					&:first-child {
						display: flex;
						align-items: center;
						justify-content: center;
					}

					&:last-child {
						font-size: 36rpx;
						font-weight: bold;
					}
				}
			}
		}
	}

	.fun {
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 0 30rpx;
		margin: 0 30rpx;

		.item {
			display: flex;
			padding: 30rpx 0;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #f3f4f5;

			&:last-child {
				border-bottom: none;
			}

			.left {
				display: flex;
				align-items: center;

				.name {
					margin-left: 20rpx;
					font-size: 28rpx;
				}
			}
		}
	}

	.order {
		background-color: #ffffff;
		padding: 30rpx;
		border-radius: 20rpx;
		display: flex;
		margin: 0 30rpx;
		justify-content: space-between;

		.item {
			text-align: center;
			width: 25%;

			.u-image {
				display: flex;
				margin-bottom: 5rpx;
				justify-content: center;
			}
		}
	}

	.user {
		display: flex;
		align-items: center;
		margin: 0 30rpx;
		margin-bottom: 10rpx;

		.setting {
			flex: 1;
			display: flex;
			justify-content: flex-end;
		}

		.info {
			flex: 1;
			padding-left: 20rpx;
			padding-right: 100rpx;

			&.login {
				>view {
					&:first-child {
						font-size: 36rpx;
						font-weight: bold;
						margin-bottom: 15rpx;
					}

					&:last-child {
						// display: flex;
						// align-items: center;
						border-radius: 18px;
						padding: 4rpx 20rpx;
						display: inline-block;
						// background-color: rgba($color: #E1E0E0, $alpha: .6);

						>view {
							display: flex;
							align-items: center;

							view {
								font-size: 24rpx;
								margin-left: 10rpx;
							}
						}
					}
				}
			}

			>view {
				&:first-child {
					font-size: 36rpx;
					font-weight: bold;
				}

				&:last-child {
					// font-size: 24rpx;
				}
			}
		}
	}

	page {
		background-color: #f7f7f7;
		// padding: 0 30rpx;
		box-sizing: border-box;
	}

	.account {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-left: 30rpx;
		margin-right: 30rpx;
		background: linear-gradient(to bottom, #FFFDF3, #FDF7D7);
		padding: 20rpx 30rpx;
		border-radius: 20rpx;
		margin-bottom: 30rpx;

		.account-top {
			font-size: 24rpx;
			color: #aeaeae;
		}

		.account-bottom {
			font-size: 32rpx;
		}

		.account-right {
			width: 128rpx;
			height: 48rpx;
			line-height: 48rpx;
			font-size: 22rpx;
			background: linear-gradient(to right, #FFA24D, #FE381B);
			color: #fff;
			text-align: center;
			border-radius: 10rpx;
			margin-top: 10rpx;
		}
	}
	.head_title{
		text-align: center;
		font-size: 32rpx;
	}
	.head-plate{
		position: absolute;
		top:0;
		width: 750rpx;
		
	}
	.head_bg{
		
		width: 750rpx;
	}
	.nav-title{
		line-height: 88rpx;
		font-size: 32rpx;
		text-align: center;
		font-weight: bold;
		margin-top: 90rpx;
	}
</style>